VisYang's Studio.

ajax 相关 和 使用简介

ajax
2015/08/29

AJAX编程

ajax:即 Asynchronous Javascript And XML，AJAX 不是一门的新的语言，而是对现有技术的综合利用。
本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

异步

异步:指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。
其优势在于不阻塞程序的执行，从而提升整体执行效率。
XMLHttpRequest可以以异步方式的处理程序。

XMLHttpRequest可以以异步方式的处理程序。

XMLHttpRequest:浏览器内建对象，用于在后台与服务器通信(交换数据) ,
由此我们便可实现对网页的部分更新，而不是刷新整个页面。

请求

HTTP请求3个组成部分：请求行、请求头、请求主体
1.利用 js 内置对象 XMLHttpRequest
2.初始化 XMLHttpRequest
var xml = new XMLHttpRequest();
3.遵循 http 协议

  • 请求报文 get
    请求行
    xhr.open(‘get’,’00.ajax.php?name=zs&age=18’);
    请求头 (默认信息不用传)
    请求主体
    xhr.send(null);
  • 请求报文 post
    请求行
    xhr.open(‘post’,’00.ajax.php’);
    请求头(除了默认信息还有content-type)
    xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);
    请求主体
    xhr.send(‘name=zs&age=18’);

响应response

由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。

1
2
3
4
5
6
7
//响应完成并且一切正常
if(xhr.readyState == 4 && xhr.status == 200){
  console.log('ok');
  console.log(xhr.responseText);
  /*把内容渲染在页面当中*/
  document.querySelector('#result').innerHTML = xhr.responseText;
}

1
2
3
4
5
6
**readyState**
0：请求未初始化（还没有调用 open()）。  
1：请求已经建立，但是还没有发送（还没有调用 send()）。  
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。  
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。
1
2
3
4
5
**status**
200 OK 一切正常，对GET和POST请求的应答文档跟在后面。
304 Not Modified 缓存
403 Forbidden 资源不可用。
404 Not Found 无法找到指定位置的资源
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
获取状态行
xhr.status 状态码
xhr.statusText 状态码信息
获取响应头
xhr.getResponseHeader('Content-Type');
xhr.getAllResponseHeaders();
响应主体  
xhr.responseText
xhr.responseXML
我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML
API详解
xhr.open() 发起请求，可以是get、post方式
xhr.setRequestHeader() 设置请求头
xhr.send() 发送请求主体get方式使用xhr.send(null)
xhr.onreadystatechange = function () {} 监听响应状态
xhr.status表示响应码，如200
xhr.statusText表示响应信息，如OK
xhr.getAllResponseHeaders() 获取全部响应头信息
xhr.getResponseHeader('key') 获取指定头信息
xhr.responseText、xhr.responseXML都表示响应主体

GET和POST请求方式的差异

1、GET没有请求主体，使用xhr.send(null)
2、GET可以通过在请求URL上添加请求参数
3、POST可以通过xhr.send(‘name=zs&age=10’)
4、POST需要设置
5、GET效率更好（应用多）
6、GET大小限制约4K，POST则没有限制

描述和传输复杂数据的方式：

XML

1、必须有一个根元素
2、不可有空格、不可以数字或.开头、大小写敏感
3、不可交叉嵌套
4、属性双引号（浏览器自动修正成双引号了）
5、特殊符号要使用实体
6、注释和HTML一样
虽然可以描述和传输复杂数据，但是其解析过于复杂并且体积较大，所以实现开发已经很少使用了。
实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="UTF-8"?>
<root>
    <arrayList>
        <array>
            <src>images/banner.jpg</src>
            <newPirce>12.00</newPirce>
            <oldPrice>30.00</oldPrice>
        </array>
        <array>
            <src>images/banner.jpg</src>
            <newPirce>12.00</newPirce>
            <oldPrice>30.00</oldPrice>
        </array>
    </arrayList>
</root>

1
2
3
4
5
6
7
8
9
10
<?php 
    header('Content-Type:text/xml;charset=utf-8');
    /*以xml格式传输数据的时候要求响应内容格式是   text/xml*/
    /*file_get_contents 获取文件内容*/
    $xml = file_get_contents('01.xml');
    /*输出xml内容*/
    echo $xml;
?>
1
2
3
4
5
6
7
8
9
10
11
var xhr = new XMLHttpRequest;
xhr.open('get', '01.php');
xhr.send(null);
xhr.onreadystatechange = function () {
  if (xhr.status == 200 && xhr.readyState == 4){
    /*获取到XML格式内容  放回的是DOM对象  document*/
    var xml = xhr.responseXML;
    /*通过选着器可以获取到xml的数据*/
    console.log(xml.querySelectorAll('array')[0].querySelector('src').innerHTML);
  }
};

JSON

即 JavaScript Object Notation，另一种轻量级的文本数据交换格式，独立于语言。
1、数据在名称/值对中
2、数据由逗号分隔(最后一个健/值对不能带逗号)
3、花括号保存对象方括号保存数组
4、使用双引号
JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取

PHP 解析方法

json_encode()、json_decode()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?php 
    header('Content-Type:text/html;charset=utf-8');
    /*以json格式传输数据的时候要求响应内容格式是   application/json*/
    /*注意也可以不设置  但是这遵循的一个规范*/
    /*file_get_contents 获取文件内容*/
    $json = file_get_contents('01.json');
    /*输出json内容*/
    echo $json;
    echo '<br><br>';
    $array = array(
        array('src'=>'images/detail01.jpg','newPrice'=>'12.00','oldPrice'=>'455.00'),
        array('src'=>'images/detail02.jpg','newPrice'=>'65.00','oldPrice'=>'878.00'),
        array( 'src'=>'images/detail01.jpg','newPrice'=>'100.00','oldPrice'=>'1000.00')
    );
    /*将php数组转化成json字符*/
    $json_array = json_encode($array);
    echo $json_array;
    echo '<br><br>';
    /*将json字符转化成php数组*/
    $array_json = json_decode($json_array);
    echo $array_json;
    echo '<br><br>';
?>

Javascript 解析方法

JSON对象 JSON.parse()、JSON.stringify()；
JSON兼容处理json2.js
总结：JSON体积小、解析方便且高效，在实际开发成为首选。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var xhr = new XMLHttpRequest;
   xhr.open('get','01.php');
   xhr.send(null);
   xhr.onreadystatechange = function(){
     if (xhr.status == 200 && xhr.readyState == 4){
       /*获取仅仅是字符串*/
       var text = xhr.responseText;
           
       /*需要把字符串转化成JSON对象*/
       var json_obj = JSON.parse(text);
       console.log(json_obj);
   
       /*我们也可以把JSON对象转化成字符串*/
       var json_str = JSON.stringify(json_obj);
       console.log(json_str);
     }
   };

封装 ajax 兼容代码

IE 低版本兼容问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*返回一个兼容的ajax对象*/
function XHR() {
  /* 声明一个变量 接收ajax对象 */
  var xhr;
  /*异常捕获处理语法*/
  try {
    /*IE低版本不支持  报错*/
    xhr = new XMLHttpRequest();
  };
  catch(e) {
    /*处理异常*/
    /*IE低版本 有自己的初始方法*/
    var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];
    for (var i=0;i<IEXHRVers.length;i++) {
      try {
        /*ActiveXObject 返回的ajax对象*/
        /*new ActiveXObject("Msxml3.XMLHTTP")*/
        xhr = new ActiveXObject(IEXHRVers[i]);
      }
        catch(e) {
          continue;
        }
    }
  }
  return xhr;
};

jQuery 的 ajax

  • jQuery为我们提供了更强大的Ajax封装
  • $.ajax({}) 可配置方式发起Ajax请求
  • $.get() 以GET方式发起Ajax请求
  • $.post() 以POST方式发起Ajax请求
  • $(‘form’).serialize() 序列化表单（即格式化key=val&key=val）
  • url 接口地址
  • type 请求方式
  • timeout 请求超时
  • dataType 服务器返回格式
  • data 发送请求数据
  • beforeSend: function () {} 请求发起前调用
  • success 成功响应后调用
  • error 错误响应时调用
  • complete 响应完成时调用（包括成功和失败）
  • jQuery Ajax介绍
  • http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
CATALOG
  1. 1. AJAX编程
    1. 1.0.1. 异步
    2. 1.0.2. XMLHttpRequest可以以异步方式的处理程序。
  2. 1.1. 请求
  3. 1.2. 响应response
    1. 1.2.1. GET和POST请求方式的差异
  • 2. 描述和传输复杂数据的方式：
    1. 2.1. XML
    2. 2.2. JSON
      1. 2.2.1. PHP 解析方法
      2. 2.2.2. Javascript 解析方法
    3. 2.3. 封装 ajax 兼容代码
    4. 2.4. jQuery 的 ajax
    • Archive Tag
    Total : 17
    2016
    2015
    demo ajax cookie session Canvas git 定时器 js 插件 表单 this hexo 博客 代码风格 jQuery h5 css3 构造函数 artTemplate 跨域 Vue webpack